<template>
  <div class="handshow">
    <div class="allevent">
      <span class="desc">全市办件总数：</span>
      <te-flop
        :number="1245673"
        :animationTime="1"
        :intervalTime="10000"
        flop-class="handshow"
      ></te-flop>
      <span class="font">件</span>
    </div>
    <div class="Satisfaction">
      <span class="desc">全市办件满意度：</span>
      <te-flop
        :number="96.73"
        :animationTime="1"
        :intervalTime="10000"
        flop-class="handshow"
      ></te-flop>
      <span class="font">%</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "handshow",
  data() {
    return {};
  },
  mounted() {},
};
</script>
<style scoped>
.handshow {
  position: absolute;
  left: calc(50vw - 180px);
  top: 90px;
}
.desc {
  color: #fff;
  float: left;
  letter-spacing: 2px;
  margin-top: 5px;
}
.allevent {
  padding: 8px 25px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #1071be;
  border-radius: 5px;
  box-shadow: 0 0 10px #1071be;
  overflow: hidden;
}
.Satisfaction {
  padding: 8px 25px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #1071be;
  border-radius: 5px;
  box-shadow: 0 0 10px #1071be;
  overflow: hidden;

  width: 275px;
  margin: 5px auto;
}
.font {
  color: #89eaff;
  margin-top: 8px;
  float: right;
  margin-left: 5px;
}
</style>
 